<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary">
        {{ plan.name }}
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      stripe
      border
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        prop="number"
        label="序号"
        width="55"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
        width="180"
      />
      <el-table-column
        align="center"
        prop="tag"
        label="标识符"
        width="180"
      />
      <el-table-column
        align="center"
        prop="configName"
        label="测试规则"
      />
      <el-table-column
        align="center"
        prop="qzjxs"
        label="测试依据"
        :formatter="arrformatter"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleClick(scope.row, true)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

    <el-dialog
      :title.sync="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
      :before-close="handleClose"
    >
      <el-container style="width: 60%">
        <el-form style="width: 100%" label-position="left" label-width="20%" :model="item">
          <el-form-item v-show="false" label="id">
            <el-input v-model="item.id" />
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="item.name" :readonly="true" />
          </el-form-item>
          <el-form-item label="标识符">
            <el-input v-model="item.tag" :readonly="true" />
          </el-form-item>
          <el-form-item label="测试规则">
            <el-cascader
              v-model="configSelected"
              :props="optionProps"
              :options="configList"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="测试依据">
            <el-select v-model="manageSelected" multiple :readonly="!dialogEdit" style="width: 100%">
              <el-option
                v-for="current in manageList"
                :key="current.id"
                :label="current.normNum + current.normName"
                :value="current.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-container>
      <span v-if="dialogEdit" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>

// import Pagination from '@/components/Pagination'
import { detailUpdate, removes, getOne, detail } from '@/api/plan' // secondary package based on el-pagination
import { list } from '@/api/manage'
import { getTree } from '@/api/config'

export default {
  name: 'QualitySolution',
  // components: { Pagination },
  data() {
    return {
      id: 0,
      total: 0,
      listLoading: true,
      plan: {},
      selectionItem: [],
      dialogVisible: false,
      dialogTitle: '新增规则配置',
      dialogEdit: true,
      item: {},
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined
      },
      list: [],
      sourceList: [],
      manageList: [],
      configList: [],
      manageSelected: [],
      configSelected: [],
      optionProps: {
        value: 'id',
        label: 'name'
      }
    }
  },

  created() {
    this.id = this.$route.params && this.$route.params.id
    this.getList()

    getOne(this.id).then(res => {
      this.plan = res.data
    })

    // 标识符list
    list().then(res => {
      this.manageList = res.data
    })
    // config tree
    getTree().then(res => {
      this.configList = res.data
    })
  },

  methods: {
    getList() {
      this.listLoading = true
      // console.log(this.id)
      detail(this.id).then(response => {
        this.list = response.data
        this.total = response.data.length

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    /**
       * 单行编辑
       * @param row
       */
    handleClick(row, isEdit) {
      console.log(row)
      this.item = row
      this.dialogVisible = true
      this.dialogTitle = row.fieldName
      this.dialogEdit = isEdit
      this.configSelected = row.configIds ? row.configIds.split('-').map(item => { return Number.parseInt(item) }) : []
      this.manageSelected = row.qzjxId ? row.qzjxId.split(',').map(item => { return Number.parseInt(item) }) : []
    },

    /**
       * 添加
       */
    handleCreate() {
      this.dialogVisible = true
      this.dialogTitle = '新增规则配置'
      this.item = {}
      this.dialogEdit = true
    },

    /**
       * 删除
       */
    handleRemove(index, row) {
      const data = []
      if (row) {
        data.push(`ids=${row.id}`)
      } else {
        if (this.selectionItem.length < 1) return
        this.selectionItem.forEach(item => {
          data.push(`ids=${item.id}`)
        })
      }
      removes(data.join('&')).then(response => {
        this.getList()
      })
    },

    /**
       * 刷新
       */
    handleRefresh() {
      this.getList()
    },

    /**
       * 多选行
       * @param rows
       */
    handleSelectionChange(rows) {
      this.selectionItem = rows
    },

    /**
       * dialog关闭
       * @param done
       */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          // done();
          this.dialogVisible = false
        })
        .catch(_ => {})
    },

    handleConfirm() {
      this.listLoading = true
      this.item.qtConfigId = this.configSelected[this.configSelected.length - 1]
      this.item.qzjxId = this.manageSelected.join(',')

      detailUpdate(this.item).then().then(response => {
        this.dialogVisible = false
        this.getList()

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    arrformatter(row, column, cellValue, index) {
      if (!cellValue) return ''
      const data = cellValue.map(item => {
        return item.normNum + item.normName
      })
      return data.join('\n')
    }
  }
}
</script>

<style scoped>

</style>
